<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            border: 0;
        }
        .on{
            background-color: #f00;
            color: #fff;
        }
    </style>
</head>
<body>


    <button class="btn on">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>

    <script>

        // 类名操作的两种方法
        //    className   字符串   不方便
        //    classList   伪数组
        //       add()  添加
        //       remove()  删除
        //       replace()  替换
        //       contains()  判断是否存在某个类名










        // var oBtns = document.querySelectorAll('.btn') ;  
        // oBtns.forEach(function(v) {
        //     v.onclick = function() {
        //         // 清除所有的
        //         oBtns.forEach(function(v) {
        //             v.className = ''
        //         })
        //         this.className = 'on'
        //     }
        // })


        var oBtns = document.querySelectorAll('.btn') ; 
        // console.log(oBtns[0].className);   // 'btn on'   字符串
        // console.log(oBtns[0].classList);   // 伪数组   

        // oBtns[0].classList.add('haha') ;
        // oBtns[0].classList.remove('on') ;

        // // oBtns[0].classList.replace('btn' , 'aa')

        // console.log(oBtns[0].classList.contains('btn'));


        oBtns.forEach(function(v) {
            v.onclick = function() {
                // 清除所有
                oBtns.forEach(function(v) {
                    v.classList.remove('on') ;
                })
                // 给当前添加 on
                this.classList.add('on');
            }
        })




    </script>
    
</body>
</html>